<template>
  <div class="wp">
    <!-- 头部 -->
    <div class="Stop">
      <div class="StopO">
        购物车
      </div>
    </div>
    <!-- 无内容部分 -->
    <div class="Scon">
      <!-- 方框 -->
      <div class="Sfang"></div>
    </div>
    <div class="Scont">
      <div class="Sconte">
        您的购物车还是空的去
        <span class="Sconten">逛逛</span>
        吧！
      </div>
      </div>
      <!-- 底部 -->
      <div class="w-footer">
      <div class="w-xfoot" >
        <ul>
          <li v-for="(item,index) in arr" :key="index" @click="change(index)"  >
            <i :class="cla[index]"></i>
            <span>{{item}}</span>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script scoped>
export default {
    name:'Shopping',
    data(){
      return{
        arr:this.$store.state.arr,
        clas:['w-list2','w-list3','a3','w-list4','w-list5'],
        cla:['a1','a2','a3','a4','a5']
      }
    },
    methods:{
      change(index){
        this.cla = ['a1','a2','a3','a4','a5'];
        for (var i = 0; i < this.arr.length; i++) {
          this.$set(this.cla,i,this.cla[i]);
        }
        this.$set(this.cla,index,this.clas[index]);
      }
    },
}
</script>

<style  scoped>
.wp {
  overflow: hidden;
}
/* 头部 */
  .Stop {
    background-color: #e53e42;
    width: 100%;
    height: 9.6rem;
    color: #fff;
    font-size: 3.6rem;
    position: fixed;
    top: 0;
    left: 0;
  }
  .StopO {
    height:9.6rem;
    width:calc(100% - 4rem) ;
    padding: 0 2rem;
    line-height: 9.6rem;
  }
  /* 无内容部分 */
  .Scon {
    margin-top:21rem;
    display: flex;
    justify-content: center;
  }
  /* 方框 */
  .Sfang {
    height: 26rem;
    width: 32rem;
    background: #efc5c5;
  }
  /* 文字框 */
  .Scont {
    margin-top:3rem;
     display: flex;
     justify-content: center;
     color: #959595;
     line-height: 3.9rem;
  }
  /* 文字 */
  .Sconte {
     font-size: 2.4rem;
     width: 21.9rem;
  }
  /* 红字 */
  .Sconten {
    color: #e53e42;
  }
  /* 底部 */
.w-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9.6rem;
}
.w-xfoot{
  border-top: 0.1rem solid #e6e6e6;
  height: 9.6rem;
}
.w-xfoot ul{
  display: flex;
  height: 9.6rem;
}
.w-xfoot ul li{
  flex: 1;
  font-size:2rem;
  color: #666;
  text-align: center;

}
.w-xfoot ul li.w-red{
  color: #e83d41;
}
.w-xfoot ul li{
  position: relative;
  overflow: hidden;
}
.w-xfoot ul li span{
  display: inline-block;
  width: 100%;
  margin-top:-0.8rem ;
  
}
.w-xfoot ul li i{
  margin-top: 1.2rem;
  display: inline-block;
  height: 5rem;
  width: 5rem;
  /* outline: 0.1rem solid #00f; */

}
.w-xfoot ul li:nth-child(1) .a1{
  background: url(../../assets/user/bottom1.png) no-repeat -5.6rem 0;
}
.w-xfoot ul li:nth-child(2) .a2{
  background: url(../../assets/user/bottom2.png) no-repeat -5.5rem 0;
}
.w-xfoot ul li:nth-child(3) .a3{
  margin-top: 1.5rem;
  display: inline-block;
  height: 5.5rem;
  width: 11.3rem;
  background: url(../../assets/user/bottom3.png) no-repeat 0 0;
}
.w-xfoot ul li:nth-child(4) .a4{
  margin-left: -0.8rem;
  background: url(../../assets/user/bottom4.png) no-repeat -5.4rem 0;
}
.w-xfoot ul li:nth-child(5) .a5{
  background: url(../../assets/user/bottom5.png) no-repeat -5.8rem 0;
}
/* 底部 */
/* list2 */
.w-xfoot ul .w-list2{
  background: url(../../assets/user/bottom1.png) no-repeat 0 0;
}
.w-xfoot ul .w-list3{
  background: url(../../assets/user/bottom2.png) no-repeat 0 0;
}
.w-xfoot ul .w-list4{
  margin-left: -0.8rem;
  background: url(../../assets/user/bottom4.png) no-repeat 0 0;
}
.w-xfoot ul .w-list5{
  background: url(../../assets/user/bottom5.png) no-repeat 0.2rem 0;
}
</style>